<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
      .one{
          width: 700px;
          height: 350px;
          border: 1px solid red;
          margin: 100px auto;
      }
      .two{
          width: 200px;
          height: 40px;
          /* border: 1px solid black; */
          margin: 0 auto;
          
          text-align: center;
      }
      .two h2{
          margin-top: 10px;
      }
      .nav{
          width: 620px;
          height: 230px;
           /* background-color: red;  */
          margin: 5px  auto;
          padding: 0;
          
      }
      .nav span{
          width: 110px;
          height: 110px;
          border: 1px solid gray;
          display: inline-block;
          margin-left: 5px;
          margin-top: 10px;
          background-color: gray;
          
      }
      .nav span ul {
          list-style: none;
          color: #333;
      }
       .nav span:nth-child(1):hover{
           background-image: url(img/1.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
            width: 120px;
           height: 120px; 
       }
        .nav span:nth-child(2):hover{
           background-image: url(img/2.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(3):hover{
           background-image: url(img/3.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(4):hover{
           background-image: url(img/4.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(5):hover{
           background-image: url(img/5.jpg);
           text-indent: -1300px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(6):hover{
           background-image: url(img/6.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(7):hover{
           background-image: url(img/7.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(8):hover{
           background-image: url(img/8.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(9):hover{
           background-image: url(img/9.jpg);
           text-indent: -1200px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
        .nav span:nth-child(10):hover{
           background-image: url(img/10.jpg);
           text-indent: -1300px;
           background-color: rgba(0, 0, 0, 0.5);
           width: 120px;
           height: 120px;
       }
    </style>
</head>
<body>
   <div class="one">
       <div class="two">
           <h2>各名车车标展示</h2>
       </div>
       <div class="nav">
           <span>
             <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
                 
             
           </span>
           <span>
                 <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                  <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                  <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                  <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                  <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                  <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                  <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                 <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
           <span>
                   <ul>
                 <h3>BWM</h3>
                 <li>宝马汽车</li>
             </ul>
           </span>
       </div>
   </div>
</body>
</html>